<template>
  <div class="more-playlist">
    <div class="palylist-info">
      <div class="info-img">
        <img :src="this.$route.params.img" />
        <p>{{this.$route.params.name}}</p>
      </div>
      <div class="info-tags">
        {{ this.$route.params.description }}
        <div v-for="(item,index) in this.$route.params.tags" :key="index">
          <span>{{item}}</span>
        </div>
      </div>
    </div>
    <hr />
    <div class="wrapper">
      <backtop/>
      <router-link class="info" v-for="(item,index) in this.songList" :key="index" :to="{name:'MusicPlay',params:{songId: item.id}}" >
        <div class="poster" :title="item.name">
          <img :src="item.al.picUrl" ref="image" />
        </div>
        <div class="text-wrap">
          <div class="title" ref="text">
            <span>歌名：{{item.name}}</span>
          </div>
          <div class="singer">
            <span>歌手：{{item.ar[0].name}}</span>
          </div>
        </div>
      </router-link>
      <div>
        <p>到底了哦~</p>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "morePlayList",
  data() {
    return {
      songList: []
    };
  },
  mounted() {
    // 通过歌单id获取歌单详情
    const url =
      this.HOST +
      `/playlist/track/all?id=${this.$route.params.id}&limit=10&offset=0`;
    this.$axios
      .get(url)
      .then(res => {
        this.songList = res.data.songs;
      })
      .catch(err => {
        console.log('获取歌单信息报错', err.response.data.message);
      });
  }
};
</script>
  
<style scoped>
.more-playlist {
  background-color: white;
}

.palylist-info {
  width: 100%;
  height: 200px;
  padding-top: 3%;
  padding-right: 20px;
  box-sizing: border-box;
  display: flex;
}
.palylist-info .info-img {
  width: 60%;
  height: 100%;
  padding-left: 10px;
}
.palylist-info .info-img img {
  max-width: 60%;
  max-height: 80%;
  padding-left: 20%;
}
.palylist-info .info-img p {
  width: 100%;
  height: 20%;
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
  white-space: wrap;
}
.palylist-info .info-tags {
  width: 40%;
  height: 100%;
}
.palylist-info .info-tags div {
  width: 100%;
  height: 30%;
  padding-top: 20%;
  box-sizing: border-box;
  text-align: center;
}
.palylist-info .info-tags div span {
  width: 100%;
  height: 50%;
  background-color: rgba(206, 220, 224, 0.5);
  padding-left: 20px;
  padding-right: 20px;
  border: 5px solid rgba(206, 220, 224, 0.1);
}
.wrapper {
  padding-top: 13px;
  text-align: center;
  margin-bottom: 10px;
  background: #fff;
  clear: both;
  overflow: hidden;
  margin: 10px auto;
  width: 90%;
}

.wrapper .info {
  width: 90%;
  height: 200px;
  text-align: center;
  padding-left: 20px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  display: flex;
  font-size: 12px;
  background-color: rgba(206, 220, 224, 0.5);
}

.wrapper .info .poster {
  height: 90%;
  width: 60%;
}

.wrapper .info .poster img {
  height: 90%;
  max-width: 180px;
  padding-top: 15px;
}
.wrapper .info .text-wrap {
  text-overflow: ellipsis;
  white-space: wrap;
  width: 40%;
  text-align: left;
  padding-top: 20%;
}

.wrapper .info .text-wrap span {
  width: 100%;
  padding-right: 20px;
}

div p {
  text-align: center;
}
</style>